<template>
  <div class="pointer-container" v-if="isShowPointer">
    <a href="javascript:;" :class="{active: index == curIndex}"
    v-for="(item, index) in num"
    :key="item"
    @click="changeCurIndex(index)"
    ></a>
  </div>
</template>

<script>
export default {
  name: 'Pointer',
  props: {
    num: Number,
    curIndex: Number,
    isShowPointer: {
      type: Boolean,
      default: true,
    }
  },
  methods: {
    changeCurIndex (index) {
      this.$emit('changeCurIndex', index)
    }
  },
}
</script>

<style lang="scss" scoped>
.pointer-container {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  a {
    display: inline-block;
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0 5px;
    border: 2px solid skyblue;
    &.active {
      background-color: skyblue;
    }
  }
}
</style>